<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有影院了"
      @load="onLoad"
    >
      <div class="xiding">
        <div class="top">
          影院
          <span class="xl" @click="gocity"
            >北京
            <i class="iconfont icon-shanglajiantou"></i>
          </span>
          <span class="fdj">
            <i class="iconfont icon-fangdajing"></i>
          </span>
        </div>
        <!-- 下拉 -->
        <div class="xiala">
          <van-dropdown-menu>
            <van-dropdown-item title="全城" ref="item">
              <van-cell center title="包邮">
                <template #right-icon>
                  <van-switch
                    v-model="switch1"
                    size="24"
                    active-color="#ee0a24"
                  />
                </template>
              </van-cell>
              <van-cell center title="团购">
                <template #right-icon>
                  <van-switch
                    v-model="switch2"
                    size="24"
                    active-color="#ee0a24"
                  />
                </template>
              </van-cell>
              <div style="padding: 5px 16px">
                <van-button type="danger" block round @click="onConfirm">
                  确认
                </van-button>
              </div>
            </van-dropdown-item>
            <van-dropdown-item v-model="value" :options="option" />
            <van-dropdown-item v-model="value" :options="option1" />
          </van-dropdown-menu>
        </div>
      </div>
      <!-- 影片 -->
      <div class="dianying">
        <div v-for="i in list" :key="i.name">
          <van-card class="dianying1">
            <template #title>
              <div class="biaoti">{{ i.name }}</div>
              <div class="price">{{ i.lowPrice | filter1 }} 起</div>
              <div class="miaoshu">{{ i.address }}</div>
              <div class="juli">{{ i.latitude | filter2 }} km</div>
            </template>
            <template #desc> </template>
          </van-card>
        </div>
      </div>

      <router-view></router-view>
    </van-list>
  </div>
</template>
<script>
import Vue from 'vue'
import {
  DropdownMenu,
  DropdownItem,
  Cell,
  Button,
  Switch,
  Card,
  List
} from 'vant'
import api from '@/api'

Vue.use(Card)
Vue.use(DropdownMenu)
Vue.use(Switch)
Vue.use(Cell)
Vue.use(Button)
Vue.use(DropdownItem)
Vue.use(List)
export default {
  data() {
    return {
      list: [],
      value: 0,
      switch1: false,
      switch2: false,
      loading: false,
      finished: false,
      pageNum: 1,
      option: [
        { text: 'APP订票', value: 0 },
        { text: '前台兑换', value: 1 }
      ],
      option1: [
        { text: '最近去过', value: 0 },
        { text: '离我最近', value: 1 }
      ]
    }
  },
  filters: {
    filter1: function (v) {
      v = (v / 100).toFixed(2)
      return v
    },
    filter2: function (b) {
      b = b.toFixed(2)
      return b
    }
  },

  methods: {
    onLoad() {
      this.$http.get(api.getCinema + '?pageNum=' + this.pageNum).then((res) => {
        console.log(res)
        if (res.status === 0 && res.msg === 'ok') {
          if (this.list.length < res.data.total) {
            this.list.push(...res.data.cinemas)
            this.pageNum++
          } else {
            this.finished = true
          }
          this.loading = false
        }
      })
    },

    onConfirm() {
      this.$refs.item.toggle()
    },
    gocity() {
      this.$router.push('/city')
    }
  },
  created() {}
}
</script>
<style lang="scss" scoped>
.top {
  height: 44px;
  width: 100%;
  text-align: center;
  font-size: 17px;
  color: #191a1b;
  line-height: 44px;
  position: fixed;
  z-index: 2;
  background-color: #fff;
  font-weight: 600;
  .fdj {
    position: absolute;
    right: 20px;
    font-size: 12px;
    font-weight: 500;
    i {
      font-size: 10px;
    }
  }
  .xl {
    position: absolute;
    left: 20px;
    font-size: 12px;
    font-weight: 500;

    i {
      font-size: 10px;
    }
  }
}
.xiala {
  height: 44px;
  z-index: 2;
  position: fixed;
  top: 44px;
  width: 100%;
}
.dianying {
  padding-top: 100px;
  margin-bottom: 30px;
}
.biaoti {
  position: absolute;
  font-size: 14px;
  left: 5px;
  top: 10px;
}
.price {
  position: absolute;
  font-size: 14px;
  color: #ffb232;
  right: 5px;
  top: 10px;
}
.miaoshu {
  position: absolute;
  left: 5px;
  top: 50px;
  width: 60%;
}
.juli {
  position: absolute;
  right: 5px;
  top: 50px;
}
.van-card {
  background-color: #fff;
  border-bottom: 1px solid #f4f4f4;
}
</style>
